<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>结算页</title>

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-getOrderInfo.css" />

</head>

<body>
<!--head-->
<div class="top">
    <div class="py-container">
        <div class="shortcut">
            <ul class="fl">
                <li class="f-item"><a href="/user/toIndex">东东商城欢迎您！</a></li>
                <li class="f-item">请登录　<span><a href="#">免费注册</a></span></li>
            </ul>
            <ul class="fr">
                <li class="f-item"><a href="/order/toOrderShow">我的订单</a></li>
                <li class="f-item space"></li>
                <li class="f-item">我的东东商城</li>
                <li class="f-item space"></li>
                <li class="f-item">东东商城会员</li>
                <li class="f-item space"></li>
                <li class="f-item">企业采购</li>
                <li class="f-item space"></li>
                <li class="f-item">关注东东商城</li>
                <li class="f-item space"></li>
                <li class="f-item">客户服务</li>
                <li class="f-item space"></li>
                <li class="f-item">网站导航</li>
            </ul>
        </div>
    </div>
</div>
<div class="cart py-container">
    <!--logoArea-->
    <div class="logoArea">
        <div class="fl logo"><span class="title">结算页</span></div>
        <div class="fr search">
            <form class="sui-form form-inline">
                <div class="input-append">
                    <input type="text" class="input-error input-xxlarge" placeholder="东东商城自营" />
                    <button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
                </div>
            </form>
        </div>
    </div>
    <!--主内容-->
    <div class="checkout py-container">
        <div class="checkout-tit">
            <h4 class="tit-txt">填写并核对订单信息</h4>
        </div>
        <div class="checkout-steps">
            <!--收件人信息-->
            <div class="step-tit">
                <h5>收件人信息<span><a data-toggle="modal" data-target=".edit" data-keyboard="false" class="newadd">新增收货地址</a></span></h5>
            </div>
            <div class="step-cont">
                <div class="addressInfo">
                    <ul class="addr-detail">
                        <li id="contactInfo" class="addr-item">
                            <input type="hidden" id="orderId" th:value="${no}">
                        </li>
                    </ul>
                    <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit" style="width:580px;">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
                                    <h4 id="myModalLabel" class="modal-title">新增地址</h4>
                                </div>
                                <div class="modal-body">
                                    <form id="insertAddressFrom" class="sui-form form-horizontal">
                                        <div class="control-group">
                                            <label class="control-label">收货人：</label>
                                            <div class="controls">
                                                <input type="text" name="contact" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">所在地区：</label>
                                            <div class="controls">
                                                <div data-toggle="distpicker">
                                                    <div class="form-group area">
                                                        <select class="form-control" id="province" name="provinceId" onchange="updateThisCity(this)">
                                                            <option value="0">请选择</option>
                                                            <option th:each="province : ${provincesList}" th:value="${province.provinceid}">[[${province.province}]]</option>
                                                        </select>
                                                        <select class="form-control" id="city" name="cityId" onchange="updateArea(this)">
                                                            <option value="0">请选择省</option>
                                                        </select>
                                                        <select class="form-control" id="district" name="townId">
                                                            <option value="0">请选择市</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">详细地址：</label>
                                            <div class="controls">
                                                <input type="text" name="address" class="input-large">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">联系电话：</label>
                                            <div class="controls">
                                                <input type="text" name="mobile" class="input-medium">
                                            </div>
                                        </div>
                                        <div class="control-group">
                                            <label class="control-label">地址别名：</label>
                                            <div class="controls">
                                                <input type="text" id="insertAlias" name="alias" class="input-medium">
                                            </div>
                                            <div class="othername">
                                                建议填写常用地址：<a onclick="setThisAlias(this)" class="sui-btn btn-default">家里</a>　<a onclick="setThisAlias(this)" class="sui-btn btn-default">父母家</a>　<a onclick="setThisAlias(this)" class="sui-btn btn-default">公司</a>
                                            </div>
                                        </div>

                                    </form>


                                </div>
                                <div class="modal-footer">
                                    <button type="button" onclick="insertAddress()" data-ok="modal" class="sui-btn btn-primary btn-large">确定</button>
                                    <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--确认地址-->
                </div>
                <div class="hr"></div>

            </div>
            <div class="hr"></div>
        </div>
    </div>
    <div class="submit">
        <a class="sui-btn btn-danger btn-xlarge" href="javascript:insertSecAddress()">提交地址</a>
    </div>
</div>
<!-- 底部栏位 -->
<!--页面底部-->
<div class="clearfix footer">
    <div class="py-container">
        <div class="footlink">
            <div class="Mod-service">
                <ul class="Mod-Service-list">
                    <li class="grid-service-item intro  intro1">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro2">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro  intro3">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item  intro intro4">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                    <li class="grid-service-item intro intro5">

                        <i class="serivce-item fl"></i>
                        <div class="service-text">
                            <h4>正品保障</h4>
                            <p>正品保障，提供发票</p>
                        </div>

                    </li>
                </ul>
            </div>
            <div class="clearfix Mod-list">
                <div class="yui3-g">
                    <div class="yui3-u-1-6">
                        <h4>购物指南</h4>
                        <ul class="unstyled">
                            <li>购物流程</li>
                            <li>会员介绍</li>
                            <li>生活旅行/团购</li>
                            <li>常见问题</li>
                            <li>购物指南</li>
                        </ul>

                    </div>
                    <div class="yui3-u-1-6">
                        <h4>配送方式</h4>
                        <ul class="unstyled">
                            <li>上门自提</li>
                            <li>211限时达</li>
                            <li>配送服务查询</li>
                            <li>配送费收取标准</li>
                            <li>海外配送</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>支付方式</h4>
                        <ul class="unstyled">
                            <li>货到付款</li>
                            <li>在线支付</li>
                            <li>分期付款</li>
                            <li>邮局汇款</li>
                            <li>公司转账</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>售后服务</h4>
                        <ul class="unstyled">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>特色服务</h4>
                        <ul class="unstyled">
                            <li>夺宝岛</li>
                            <li>DIY装机</li>
                            <li>延保服务</li>
                            <li>东东商城E卡</li>
                            <li>东东商城通信</li>
                        </ul>
                    </div>
                    <div class="yui3-u-1-6">
                        <h4>帮助中心</h4>
                        <img src="img/wx_cz.jpg">
                    </div>
                </div>
            </div>
            <div class="Mod-copyright">
                <ul class="helpLink">
                    <li>关于我们<span class="space"></span></li>
                    <li>联系我们<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>商家入驻<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们<span class="space"></span></li>
                    <li>营销中心<span class="space"></span></li>
                    <li>友情链接<span class="space"></span></li>
                    <li>关于我们</li>
                </ul>
                <p>地址：北京市昌平区沙阳路18号 邮编：100000 电话：400-0123-302</p>
                <p>京ICP备08006666号京公网安备11010888888</p>
            </div>
        </div>
    </div>
</div>
<!--页面底部END-->

</body>

</html>
<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<!--<script type="text/javascript" src="/components/ui-modules/nav/nav-portal-top.js"></script>-->
<script type="text/javascript" src="/js/pages/getOrderInfo.js"></script>

<!--bootstrap-toastr-->
<script type="text/javascript" src="/bootstrap/toastr/toastr.min.js"></script>
<link rel="stylesheet" type="text/css" href="/bootstrap/toastr/toastr.css">

<script>

    var id = $("#orderId").val();
    console.log(id)

    $(function () {
        listContactInfo();
    });


    function listContactInfo() {
        $.ajax({
            url : "/address/getAddressListByUser",
            dataType : "json",
            type : "get",
            async : false,
            success : function (returnData) {
                if (returnData.code == 200) {
                    var result = returnData.data;
                    var html = '';
                    $(result).each(function (i, e) {
                        html += '<div>'
                        if (i == 0) {
                            html += '<div class="con name selected"><input type="hidden" value="'+ e.id +'"><a onclick="changeClass(this);" >' + e.contact + '<span title="点击取消选择">&nbsp;</a></div>'
                        }else {
                            html += '<div class="con name"><input type="hidden" value="'+ e.id +'"><a onclick="changeClass(this);" >' + e.contact + '<span title="点击取消选择">&nbsp;</a></div>'
                        }
                        html += '<div class="con address">'+ e.contact+" "+e.province+" "+e.city+" "+e.town+" "+e.address +' <span>'+ e.mobile +'</span>'
                        if (e.isDefault == 0) {
                            html += '<span class="base">默认地址</span>'
                        }
                        html += '<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>'
                        html += '</div>'
                        html += '<div class="clearfix"></div>'
                        html += '</div>'
                    })
                    $("#contactInfo").html(html);
                }
            },
            error : function () {
                toastr.error("系统错误")
            }
        })
    }

    function changeClass(obj) {
        if ($(obj.parentNode).attr("class") == "con name selected") {
            $(obj.parentNode).attr("class","con name")

        }else if ($(obj.parentNode).attr("class") == "con name") {
            $(obj.parentNode).attr("class","con name selected")
        }
    }

    function updateThisCity(o) {
        var provinceId = o.value;
        if (provinceId == 0){
            $("#city").html("<option value='0'>请选择</option>");
            $("#district").html("<option value='0'>请选择</option>");
            return;
        }
        $.ajax({
            url : "/address/listCityByProvinceId",
            type : "post",
            data : {provinceId : provinceId},
            dataType : "json",
            success : function (returnData) {
                if (returnData.code == 200) {
                    var city = returnData.data;
                    var cityHtml = "<option value='0'>请选择</option>";
                    $(city).each(function (i, e) {
                        cityHtml += "<option value='" + e.cityid + "'>" + e.city + "</option>";
                    });
                    $("#city").html(cityHtml);
                } else {
                    toastr.error(returnData.message);
                }
            },
            error : function () {
                toastr.error("系统错误");
            }
        });
    }

    function updateArea(o) {
        var cityId = o.value;
        if (cityId == 0){
            $("#district").html("<option value='0'>请选择</option>");
            return;
        }
        $.ajax({
            url : "/address/listAreaByCityId",
            type : "post",
            data : {cityId : cityId},
            dataType : "json",
            success : function (returnData) {
                if (returnData.code == 200) {
                    var area = returnData.data;
                    var areaHtml = "<option value='0'>请选择</option>";
                    $(area).each(function (i, e) {
                        areaHtml += "<option value='" + e.areaid + "'>" + e.area + "</option>";
                    });
                    $("#district").html(areaHtml);
                } else {
                    toastr.error(returnData.message);
                }
            },
            error : function () {
                toastr.error("系统错误");
            }
        });
    }

    function setThisAlias(o) {
        var text = $(o).html();
        $("#insertAlias").val(text);
    }

    function insertAddress() {
        $.ajax({
            url : "/address/insertAddress",
            type : "post",
            data : $("#insertAddressFrom").serialize(),
            dataType : "json",
            success : function (returnData) {
                if (returnData.code == 200) {
                    toastr.success(returnData.message);
                } else {
                    toastr.error(returnData.message);
                }
                setTimeout(function () {
                    reload();
                }, 1000);
            },
            error : function () {
                toastr.error("系统错误");
            }
        });
    }

    function reload() {
        window.location.reload();
    }
    
    function insertSecAddress() {
        //收货地址id
        var addressId;
        var divs = $("#contactInfo").find("div");
        $(divs).each(function (i, e) {
            if ($(e).attr("class") == "con name selected") {
                addressId = $(e).find("input").val()
            }
        })

        $.ajax({
            url : "/seckill/insertSecOrderAddress",
            dataType : "json",
            data : {addressId : addressId,id : id},
            type : "post",
            success : function (returnData) {
                if (returnData.code == 200) {
                    toastr.success(returnData.message);
                } else {
                    toastr.error(returnData.message);
                }
                setTimeout(function () {
                    reload();
                }, 1000);
            },
            error : function () {
                toastr.error("系统错误")
            }
        })
    }

    // function insertOrder() {
    //
    //     //收货地址id
    //     var addressId;
    //     var divs = $("#contactInfo").find("div");
    //     $(divs).each(function (i, e) {
    //         if ($(e).attr("class") == "con name selected") {
    //             addressId = $(e).find("input").val()
    //         }
    //     })
    //
    //     //获取支付方式
    //     var paymentType;
    //     var lis = $("#payWay").find("li");
    //     $(lis).each(function (i, e) {
    //         if ($(e).attr("class") == "selected") {
    //             if ($(e).text() == "支付宝付款") {
    //                 paymentType = 1;
    //             }else {
    //                 paymentType = 2;
    //             }
    //         }
    //     });
    //
    //     $.ajax({
    //         url : "/order/insertOrder",
    //         dataType : "json",
    //         data : {paymentType : paymentType,addressId : addressId,cartList : JSON.stringify(cartList)},
    //         type : "post",
    //         success : function (returnData) {
    //             if (returnData.code == 200) {
    //                 var result = returnData.data;
    //                 location.href = "/alipay/tradePagePay?out_trade_no="+result.out_trade_no+"&total_amount="+result.total_amount+"&subject="+result.subject+"&body="+result.body;
    //             }else {
    //                 toastr.error("提交订单失败");
    //             }
    //         },
    //         error : function () {
    //             toastr.error("系统错误")
    //         }
    //     })
    // }

</script>